<script setup>
import {ref} from "vue";

const menuRef = ref();
const itemRef = ref();







//区域
const qvyv = ref(1);
const activeIndex = ref("");
const items = [
  {
    text: '不限',
    name: 'buxian',
    children: [
      { text: '不限', id: "" },
    ],
  },
  {
    text: '附近',
    name: 'hujing',
    children: [
      { text: '1km', id: "1km" },
      { text: '3km', id: "3km" },
      { text: '4km', id: "4km" },
      { text: '5km', id: "5km" },
    ],
  },
  {
    text: '地铁',
    name: 'ditie',
    children: [
      { text: '地铁1号线', id: '地铁1号线' },
      { text: '地铁2号线', id: '地铁2号线' },
      { text: '地铁3号线', id: '地铁3号线' }
    ],
  },
  {
    text: '区域',
    name: 'quyu',
    children: [
      { text: '上城区', id: '上城区' },
      { text: '下城区', id: '下城区' },
      { text: '拱墅区', id: '拱墅区' },
      { text: '西湖区', id: '西湖区' },
      { text: '滨江区', id: '滨江区' },
    ],
  }
];

//租金
const zhujing = ref(0);
const option1 = [
  { text: '不限', value: 0 },
  { text: '1200以下', value: 1 },
  { text: '1200-1500', value: 2 },
  { text: '1500-1800', value: 3 },
  { text: '1800-2000', value: 4 },
  { text: '2000-2500', value: 5 },
  { text: '2500-3000', value: 6 },
  { text: '3000-4000', value: 7 },
  { text: '4000-5000', value: 8 },
  { text: '5000以上', value: 9 },
];
const jiagefanwei = ref([
    {priceA: 0,priceB: 0},
    {priceA: 0,priceB: 1200},
    {priceA: 1200,priceB: 1500},
    {priceA: 1500,priceB: 1800},
    {priceA: 1800,priceB: 2000},
    {priceA: 2000,priceB: 2500},
    {priceA: 2500,priceB: 3000},
    {priceA: 3000,priceB: 4000},
    {priceA: 4000,priceB: 5000},
    {priceA: 5000,priceB: 100000},
])

//方式
const fangshi = ref({})

//更多
const gengduo = ref({})


const empty = () => {
  fangshi.value = {}
  gengduo.value = {}
  zhujing.value =0;
  qvyv.value = 0;
}

//传出的参数
const params = ref({})

const onSubmit = () => {
  menuRef.value.close();
};


const emits = defineEmits(["close"])
//传参
const close = () => {
  params.value.priceA = jiagefanwei.value[zhujing.value].priceA;
  params.value.priceB = jiagefanwei.value[zhujing.value].priceB;
  params.value.type = fangshi.value.fangshi;
  params.value.houseType= fangshi.value.huxing;
  params.value.baozhang = gengduo.value.baozhang;
  params.value.zhuangxiu = gengduo.value.zhuangxiu;
  params.value.weishengjian = gengduo.value.weishengjian;
  params.value.chufang = gengduo.value.chufang;
  params.value.chaoxiang = gengduo.value.chaoxiang;
  params.value.dianti = gengduo.value.dianti;
  emits('close',params)
}


</script>

<template>
  <van-dropdown-menu ref="menuRef" style="width: 100%;">
    <van-dropdown-item title="区域" ref="itemRef" @close="close()">
      <van-tree-select
          v-model:active-id="qvyv"
          v-model:main-active-index="activeIndex"
          :items="items"
      />
    </van-dropdown-item>

    <van-dropdown-item title="租金" v-model="zhujing" :options="option1" @close="close()"/>

    <van-dropdown-item title="方式" @close="close()">
      <van-form @submit="onSubmit">
        <van-cell-group inset>

          <van-field name="radio" label="方式">
            <template #input>
              <van-radio-group v-model="fangshi.fangshi" direction="horizontal">
                <van-radio name="整租">整租</van-radio>
                <van-radio name="合租">合租</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="radio" label="户型">
            <template #input>
              <van-radio-group v-model="fangshi.huxing" direction="horizontal">
                <van-radio name="一室">一室</van-radio>
                <van-radio name="二室">二室</van-radio>
                <van-radio name="三室">三室</van-radio>
                <van-radio name="四室">四室</van-radio>
                <van-radio name="五室">五室</van-radio>
                <van-radio name="五室以上">五室以上</van-radio>
              </van-radio-group>
            </template>
          </van-field>
        </van-cell-group>
        <van-button style="width: 50%;color: rgb(0,0,0)" square color="#CBCBCBFF" type="primary" @click="empty()">
          重置
        </van-button>
        <van-button style="width: 50%; color: #000000" square type="primary" color="#afbac2" native-type="submit">
          确定
        </van-button>
      </van-form>
    </van-dropdown-item>
    <van-dropdown-item title="更多" @close="close()">
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field name="radio" label="房源保障">
            <template #input>
              <van-radio-group v-model="gengduo.baozhang" direction="horizontal">
                <van-radio name="实名认证">实名认证</van-radio>
                <van-radio name="非中介保障金">非中介保障金</van-radio>
                <van-radio name="合同认证">合同认证</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="radio" label="装修">
            <template #input>
              <van-radio-group v-model="gengduo.zhuangxiu" direction="horizontal">
                <van-radio name="精装">精装</van-radio>
                <van-radio name="简装">简装</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="radio" label="卫生间">
            <template #input>
              <van-radio-group v-model="gengduo.weishengjian" direction="horizontal">
                <van-radio name="独卫">独卫</van-radio>
                <van-radio name="">公用</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="radio" label="厨房">
            <template #input>
              <van-radio-group v-model="gengduo.chufang" direction="horizontal">
                <van-radio name="">无厨房</van-radio>
                <van-radio name="厨房">有厨房</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="radio" label="朝向">
            <template #input>
              <van-radio-group v-model="gengduo.chaoxiang" direction="horizontal">
                <van-radio name="东">东</van-radio>
                <van-radio name="南">南</van-radio>
                <van-radio name="西">西</van-radio>
                <van-radio name="北">北</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <van-field name="radio" label="电梯">
            <template #input>
              <van-radio-group v-model="gengduo.dianti" direction="horizontal">
                <van-radio name="">无电梯</van-radio>
                <van-radio name="电梯">有电梯</van-radio>
              </van-radio-group>
            </template>
          </van-field>
        </van-cell-group>
        <van-button style="width: 50%;color: rgb(0,0,0)" square color="#CBCBCBFF" type="primary" @click="empty()">
          重置
        </van-button>
        <van-button style="width: 50%; color: #000000" square type="primary" color="#afbac2" native-type="submit">
          确定
        </van-button>
      </van-form>
    </van-dropdown-item>
  </van-dropdown-menu>
</template>

<style scoped>

</style>